<po-context-tabs #poTab [p-size]="size">
  <po-tab
    *ngFor="let tab of tabs; let i = index"
    [p-active]="tab.active"
    [p-disabled]="tab.disabled"
    [p-hide]="tab.hide"
    [p-hide-close]="tab.hideClose"
    [p-label]="tab.label"
    (p-click)="onClick(tab)"
    (p-close-tab)="onClose(tab)"
  >
    <div class="po-font-subtitle">Tab Content {{ i }}</div>
  </po-tab>
</po-context-tabs>

<po-dynamic-form #tabsForm [p-fields]="tabsFieldsForm" [p-value]="tabs"> </po-dynamic-form>

<div class="po-row">
  <po-button
    class="po-md-3"
    p-label="Add Tab"
    [p-disabled]="tabsForm.form.invalid"
    (p-click)="addTab(tabsForm.form.value); tabsForm.form.reset()"
  >
  </po-button>
</div>

<po-divider></po-divider>

<po-radio-group
  class="po-md-12"
  name="size"
  [(ngModel)]="size"
  p-columns="4"
  p-label="Size"
  p-help="Para aplicar o tamanho small, configure o nível de acessibilidade para AA, ajustável no navbar ou serviço de tema (https://po-ui.io/documentation/po-theme)."
  [p-options]="sizeOptions"
>
</po-radio-group>

<div class="po-row">
  <po-button class="po-md-3" p-label="Sample Restore" (p-click)="restore()"> </po-button>
</div>
